<template>
  <div class="demo">
    <div class="demo-title">不可用</div>
    <div class="demo-content">
      <Radio v-model:checked="checked1" :disabled="disabled">Disabled</Radio>
      <br />
      <Radio v-model:checked="checked2" :disabled="disabled">Disabled</Radio>
      <div :style="{ marginTop: 20 }">
        <Button type="primary" @click="toggleDisabled">Toggle disabled</Button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Radio from '@sscd/radio';
  const disabled = ref<boolean>(true);
  const checked1 = ref<boolean>(false);
  const checked2 = ref<boolean>(false);
  const toggleDisabled = () => {
    disabled.value = !disabled.value;
  };
</script>
